<template>
  <section class="component leave-case-button">
    <el-button
      @click="onClickButton"
      class="list-button white-button"
      size="mini"
      type="text"
      v-if="menuChannel !== 44 && menuChannel !== 34"
      >留案申请</el-button
    >
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      show-close
      :visible.sync="dialog"
      append-to-body
      title="留案申请"
      width="600px"
    >
      <leave-case-apply
        :applyType="applyType.value"
        :caseIds="[caseId]"
        @close="dialog = false"
      ></leave-case-apply>
    </el-dialog>
  </section>
</template>
<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import LeaveCaseApply from "~/components/apply-component/leave-case-apply.vue";
import { State, namespace } from "vuex-class";
import { ApplyType } from "~/config/enum.config";

const CollectionExecutionModule = namespace("collection-execution");

@Component({
  components: {
    LeaveCaseApply
  }
})
export default class LeaveCaseButton extends Vue {
  @CollectionExecutionModule.State private caseId;
  @CollectionExecutionModule.State private menuChannel;

  private dialog: boolean = false;
  private applyType: any = {};

  private onClickButton() {
    this.applyType = ApplyType.leave;
    this.dialog = true;
  }
}
</script>
<style lang="less" scope></style>
